<template>
    <view 
        class="tabber-wrap"
        :style="`background-color: ${backgroundColor};height: ${tabberHeight}rpx;padding-bottom: ${safeAreaInsets?.bottom}px;`"
    >
        <view
            class="tabber-item"
            v-for="(item, index) in tabberStore.tabberList" :key="index"
            :style="currentIndex == index ? `color: ${selectedColor}` : `color: ${color}`"
            @click="handleSelectTabber(item)"

        >
            <!-- 图标区域 -->
            <i :class="`iconfont ${item.icon}`"></i>

            <!-- 名称区域 -->
            <view class="name ellipsis-1">{{ item.name }}</view>

            <!-- 徽标区域 -->
            <view class="badge" v-if="item.badge">{{ item.badge  }}</view>
            <view class="dot" v-if="item.dot"></view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { useTabberStore } from '@/stores'
import type { tabber } from '@/types/common'


// 获取屏幕边界到安全区域的距离,不同的机型距离顶部的高度不同
const { safeAreaInsets } = uni.getSystemInfoSync()


const tabberHeight = safeAreaInsets?.bottom ? (safeAreaInsets.bottom * 2) + 80 : 80

// 使用导航存储
const tabberStore = useTabberStore()

// 接收参数
withDefaults(defineProps<{
    backgroundColor?: string
    currentIndex?: number
    color?: string
    selectedColor?: string
}>(), {
    backgroundColor: '#fff',
    currentIndex: 0,
    color: '#757575',
    selectedColor: '#008000'
})

// 处理选择导航
const handleSelectTabber = (item: tabber) => {
    uni.redirectTo({ url: item.url })
}
</script>

<style scoped lang="scss">
.tabber-wrap {
    display: flex;
    justify-content: space-around;
    padding: 10rpx 0;
    border-top: 2rpx solid #dfdede;
    height: 80rpx;

    // 置底
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    .tabber-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 116rpx;
        .iconfont {
            font-size: 32rpx;
        }
        .name {
            font-size: 24rpx;
            line-height: 28rpx;
        }
        .badge {
            position: absolute;
            background-color: #ff0000;
            width: 26rpx;
            height: 26rpx;
            border-radius: 50%;
            font-size: 18rpx;
            color: #fff;
            top: -10rpx;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .dot {
            position: absolute;
            background-color: #ff0000;
            width: 14rpx;
            height: 14rpx;
            border-radius: 50%;
            color: #fff;
            top: -10rpx;
            right: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>